<template>
  <a-drawer
    :maskClosable="false"
    :visible="visible"
    :title=" isAdd ? '新增商户' : '修改商户' "
    @close="onClose"
    :body-style="{ paddingBottom: '80px' }"
    width="40%"
    class="drawer-width"

  >
    <a-form-model v-if="visible" ref="infoFormModel" :model="saveObject" layout="vertical" :rules="rules">
      <a-row justify="space-between" type="flex">
        <a-col :span="10">
          <a-form-model-item label="商户名称" prop="custName">
            <a-input
              placeholder="请输入商户名称"
              v-model="saveObject.custName"
              :disabled="!this.isAdd"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item label="帐号余额" prop="balance">
            <a-input
              placeholder="帐号余额"
              v-model="saveObject.balance"
              :disabled="!this.isAdd"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item label="充值金额" prop="incrBalance">
            <a-input
              placeholder="充值金额"
              v-model="saveObject.incrBalance"
            />
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-row justify="space-between" type="flex">
        <a-col :span="10">
          <a-form-model-item label="授信额度" prop="mchShortName">
            <a-input
              placeholder="请输入授信额度"
              v-model="saveObject.creditLimit"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item label="短信单价" prop="contactName">
            <a-input
              placeholder="请输入短信单价"
              v-model="saveObject.unitPrice"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <div class="drawer-btn-center" >
      <a-button icon="close" :style="{ marginRight: '8px' }" @click="onClose" style="margin-right:8px">
        取消
      </a-button>
      <a-button type="primary" icon="check" @click="handleOkFunc" :loading="btnLoading">
        保存
      </a-button>
    </div>
  </a-drawer>

</template>

<script>
import { API_URL_SMS_CUST_LIST, req } from '@/api/manage'
export default {

  props: {
    callbackFunc: { type: Function }
  },

  data () {
    const checkIsvNo = (rule, value, callback) => { // 校验类型为特约商户是否选择了服务商
      if (this.saveObject.type === 2 && !value) {
        callback(new Error('请选择服务商'))
      }
      callback()
    }
    return {
      btnLoading: false,
      isAdd: true, // 新增 or 修改页面标志
      saveObject: {}, // 数据对象
      recordId: null, // 更新对象ID
      visible: false, // 是否显示弹层/抽屉
      isvList: null, // 服务商下拉列表
      rules: {
        custName: [{ required: true, message: '请输入商户名称', trigger: 'blur' }],
        isvNo: [{ validator: checkIsvNo, trigger: 'blur' }]
      }
    }
  },
  created () {
  },
  methods: {
    show: function (recordId) { // 弹层打开事件
      this.isAdd = !recordId
      this.saveObject = { 'state': 1, 'type': 1, 'incrBalance': 0 } // 数据清空
      if (this.$refs.infoFormModel !== undefined) {
        this.$refs.infoFormModel.resetFields()
      }
      const that = this
      if (!this.isAdd) { // 修改信息 延迟展示弹层
        that.recordId = recordId
        req.getById(API_URL_SMS_CUST_LIST, recordId).then(res => {
          that.saveObject = res
          that.$set(that.saveObject, 'incrBalance', 0)
        })
      }
      this.visible = true // 立马展示弹层信息
    },
    handleOkFunc: function () { // 点击【确认】按钮事件
        const that = this
        this.$refs.infoFormModel.validate(valid => {
          if (valid) { // 验证通过
            // 请求接口
            if (that.isAdd) {
              this.btnLoading = true
              req.add(API_URL_SMS_CUST_LIST, that.saveObject).then(res => {
                that.$message.success('新增成功')
                that.visible = false
                that.callbackFunc() // 刷新列表
                that.btnLoading = false
              }).catch(res => {
                that.btnLoading = false
              })
            } else {
              req.updateById(API_URL_SMS_CUST_LIST, that.recordId, that.saveObject).then(res => {
                that.$message.success('修改成功')
                that.visible = false
                that.callbackFunc() // 刷新列表
                that.btnLoading = false
                that.resetIsShow = true // 展示重置密码板块
                that.sysPassword.resetPass = false
                that.sysPassword.defaultPass = true	// 是否使用默认密码默认为true
              }).catch(res => {
                that.btnLoading = false
                that.resetIsShow = true // 展示重置密码板块
                that.sysPassword.resetPass = false
                that.sysPassword.defaultPass = true	// 是否使用默认密码默认为true
              })
            }
          }
        })
    },
    onClose () {
      this.visible = false
    },
    searchFunc: function () { // 点击【查询】按钮点击事件
      this.$refs.infoTable.refTable(true)
    }
  }
}
</script>
<style lang="less">
  .typePopover {
    position: absolute;
    top: 0;
    left:62px;
  }
</style>
